<template>
  <view>
    <view class="content">
      <view class="content-item" v-for="item in info">
        <text class="content-itemTitle">{{item.lable}}：</text>
        <input v-model="item.value" :type="item.status ? 'text' : 'password'" :placeholder="item.place" />
        <view :class="['iconfont', item.status ? 'icon-yanjing_xianshi' : 'icon-yanjing_yincang']" @click="show(item.id)">
        </view>
      </view>
    </view>
    <button class="queD" @click="sub">确&nbsp;&nbsp;&nbsp;定</button>
  </view>
</template>

<script>
  import {
    uploadPassword
  } from '../../request/api.js'
  export default {
    data() {
      return {
        info: [{
          id: 1,
          lable: "旧密码",
          status: false,
          place: '请输入旧密码',
          value: ''
        }, {
          id: 2,
          lable: "新密码",
          status: false,
          place: '请输入新密码',
          value: ''
        }, {
          id: 3,
          lable: "确认密码",
          status: false,
          place: '请确认密码',
          value: ''
        }],
      }
    },
    methods: {
      show(id) {
        this.info.map(item => {
          if (item.id === id) {
            item.status = !item.status
          }
          return item
        })
      },
      sub() {
        // console.log(this.info[0].value);
        const pwd = {
          oldPwd: this.info[0].value,
          newPwd: this.info[2].value
        }
        // console.log(pwd)
        uploadPassword(pwd).then((res) => {
          // console.log(res)
          uni.clearStorage().then(() => {
            console.log('已成功清除全部本地存储');
          }).catch((err) => {
            console.log('清除本地存储出现错误：', err);
          })
          uni.showToast({
            icon: 'success',
            title: '修改成功'
          })
        }).catch((err) => {
          console.log(err)
        })
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/my/my'
          })
        },800)
      }
    }
  }
</script>

<style>
  page {
    background-color: #f2f2f2;
  }

  .content-item {
    width: 90%;
    height: 80rpx;
    margin: 20rpx auto;
    padding: 0 16rpx;
    background-color: #ffffff;
    border-radius: 8rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .content-itemTitle {
    margin-left: 16rpx;
  }

  .content-item input {
    margin-left: -100rpx;
  }

  .exit {
    width: 90%;
    border-radius: 100rpx;
    background: #e13938;
    color: #fff;
    margin-top: 100rpx;
  }

  .queD {
    width: 70%;
    border-radius: 100rpx;
    background: #e13938;
    color: #fff;
    margin-top: 100rpx;
    margin-top: 500rpx;
  }
</style>